﻿@page "/admin/page/edit/{id:guid?}"
@model Moonglade.Web.Pages.Admin.EditPageModel
@{
    ViewBag.Title = "Edit Page";
}

@{
    <script>
        var isPreviewRequired = false;
    </script>
}

@section scripts {
    <partial name="_MonacoLoaderScript" />
    <script>
        var pageId = '@Model.PageId.ToString()';

        var btnSubmitPage = '#btn-submit';

        var htmlContentEditor = null;
        var cssContentEditor = null;
        var hasCssEditorInitialized = false;

        require(['vs/editor/editor.main'], function () {
            htmlContentEditor = initEditor('RawHtmlContentEditor', "#EditPageRequest_RawHtmlContent", 'html');
        });

        var assignEditorValues2 = function () {
            assignEditorValues(htmlContentEditor, "#EditPageRequest_RawHtmlContent")

            // Edit Mode, preserve old value when user has not clicked on CSS tab
            var oldCssValue = document.querySelector("#EditPageRequest_CssContent").value;
            var cssValue = hasCssEditorInitialized ? window.cssContentEditor.getValue() : oldCssValue;

            document.querySelector("#EditPageRequest_CssContent").value = cssValue;
        }

        var onPageCreateEditBegin = function () {
            document.querySelector(btnSubmitPage).classList.add('disabled');
            document.querySelector(btnSubmitPage).disabled = true;
        };

        var onPageCreateEditComplete = function () {
            document.querySelector(btnSubmitPage).classList.remove('disabled');
            document.querySelector(btnSubmitPage).removeAttribute('disabled');
        };

        function postCreateOrEdit() {
            onPageCreateEditBegin();

            var apiAddress = pageId == window.emptyGuid ? `/api/page` : `/api/page/${pageId}`;
            var verb = pageId == window.emptyGuid ? 'POST' : 'PUT';

            callApi(apiAddress, verb,
                {
                    title: document.querySelector("#EditPageRequest_Title").value,
                    slug: document.querySelector("#EditPageRequest_Slug").value,
                    metaDescription: document.querySelector("#EditPageRequest_MetaDescription").value,
                    rawHtmlContent: document.querySelector("#EditPageRequest_RawHtmlContent").value,
                    cssContent: document.querySelector("#EditPageRequest_CssContent").value,
                    hideSidebar: document.querySelector('#EditPageRequest_HideSidebar').checked,
                    isPublished: document.querySelector('#EditPageRequest_IsPublished').checked
                },
                async (resp) => {
                    onPageCreateEditComplete();
                    var data = await resp.json();

                    if (data.pageId) {
                        pageId = data.pageId;
                        blogToast.success('Page saved successfully.');

                        if (document.querySelector('#EditPageRequest_IsPublished').checked) {
                            if (document.querySelector('#btn-preview')) {
                                document.querySelector('#btn-preview').style.display = 'none';
                            }
                        }

                        if (isPreviewRequired) {
                            isPreviewRequired = false;
                            window.open(`/page/preview/${data.pageId}`);
                        }
                    }
                });
        }

        window.addEventListener('keydown', function (event) {
            if (event.ctrlKey || event.metaKey) {
                if (String.fromCharCode(event.which).toLowerCase() === 's') {
                    event.preventDefault();
                    document.querySelector('#btn-submit').click();
                }
            }
        });

        document.querySelectorAll('a[data-bs-toggle="tab"]').forEach(function (element) {
            element.addEventListener('shown.bs.tab', function (e) {
                var isCssTab = e.target.id === "csscontent-tab";
                if (isCssTab && !hasCssEditorInitialized) {
                    cssContentEditor = initEditor('CssContentEditor', "#EditPageRequest_CssContent", 'css');
                    hasCssEditorInitialized = true;
                }
            });
        });

        function handleSubmit(e) {
            e.preventDefault();

            isPreviewRequired = e.submitter.id == 'btn-preview';
            assignEditorValues2();

            postCreateOrEdit();
        }

        const form = document.querySelector('#page-edit-form');
        form.addEventListener('submit', handleSubmit);
    </script>
}

@section head {
    <style>
        .monaco-target {
            border-left: 1px solid #dee2e6;
            border-right: 1px solid #dee2e6;
            border-bottom: 1px solid #dee2e6;
            width: 100%;
            min-height: calc(100vh - 330px);
        }
    </style>
}

<div>

    <form id="page-edit-form" method="post">
        <div class="row g-2">
            <div class="col-md-9 col-xl-10">
                <input type="text" asp-for="EditPageRequest.Title" class="form-control form-control-lg mb-1"
                    placeholder="Title" required />

                <div class="input-group input-group-sm">
                    <label class="input-group-text" asp-for="EditPageRequest.Slug">
                        <i class="bi-link-45deg">
                        </i>
                    </label>
                    <input type="text" asp-for="EditPageRequest.Slug" class="form-control form-control-sm"
                        placeholder="Slug" required />
                </div>

                <ul class="nav nav-tabs mt-3" id="editor-box-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="profile-tab" data-bs-toggle="tab"
                            href="#rawhtmlcontent-editor-box" role="tab" aria-controls="html"
                            aria-selected="false">HTML</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="csscontent-tab" data-bs-toggle="tab" href="#csscontent-editor-box"
                            role="tab" aria-controls="css" aria-selected="true">CSS</a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="rawhtmlcontent-editor-box" role="tabpanel"
                        aria-labelledby="html-tab">
                        <div id="RawHtmlContentEditor" class="monaco-target">
                        </div>
                        <textarea asp-for="EditPageRequest.RawHtmlContent"
                            class="page-rawhtmlcontent-textarea d-none"></textarea>
                    </div>
                    <div class="tab-pane" id="csscontent-editor-box" role="tabpanel" aria-labelledby="css-tab">
                        <div id="CssContentEditor" class="monaco-target">
                        </div>
                        <textarea asp-for="EditPageRequest.CssContent"
                            class="page-csscontent-textarea d-none"></textarea>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xl-2">
                <div class="admin-side-options-container p-3 rounded-3 shadow-sm border mb-4">
                    <div class="mb-3">
                        <div class="form-check form-switch mb-2">
                            <input type="checkbox" asp-for="EditPageRequest.HideSidebar" class="form-check-input">
                            <label asp-for="EditPageRequest.HideSidebar" class="form-check-label"></label>
                        </div>
                        <div class="form-check form-switch mb-2">
                            <input type="checkbox" asp-for="EditPageRequest.IsPublished" class="form-check-input">
                            <label asp-for="EditPageRequest.IsPublished" class="form-check-label"></label>
                        </div>
                    </div>
                    <div class="border-top pt-3">
                        <div class="form-floating">
                            <textarea asp-for="EditPageRequest.MetaDescription"
                                placeholder="@Html.DisplayNameFor(m => m.EditPageRequest.MetaDescription)"
                                class="form-control form-control-sm h-200px" spellcheck="false" required></textarea>
                            <label class="form-label" asp-for="EditPageRequest.MetaDescription"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-3">
            <button type="submit" class="btn btn-outline-accent" id="btn-submit">
                @SharedLocalizer["Save"]
            </button>
            @if (!Model.EditPageRequest.IsPublished)
            {
                <button type="submit" class="btn btn-outline-success" id="btn-preview">
                    @SharedLocalizer["Preview"]
                </button>
            }
            <a asp-page="./BlogPage" class="btn btn-outline-secondary">@SharedLocalizer["Cancel"]</a>
        </div>
    </form>
</div>